<template xmlns="http://www.w3.org/1999/html">
    <div class="movie">
        <meta name="referrer" content="no-referrer"/>
        <br>
        <div v-for="(category,index) in category_list">
            <p style="text-align: center"><h2>{{category.name}}</h2></p>
            <br>
            <el-row>
                <el-col :span="0.5"></el-col>
                <el-col :span="4">
                    <router-link :to="'/detail/'+movie_lists[index][0].id">
                        <span>
                            <img :src="movie_lists[index][0].movie_img" height="250px"
                                 :alt="movie_lists[index][0].name">
                            <h6><b>{{movie_lists[index][0].name}}</b></h6>
                        </span>
                    </router-link>
                </el-col>

                <el-col :span="0.5"></el-col>
                <el-col :span="4">
                    <router-link :to="'/detail/'+movie_lists[index][1].id">
                        <span>
                            <img :src="movie_lists[index][1].movie_img" height="250px"
                                 :alt="movie_lists[index][1].name">
                            <h6><b>{{movie_lists[index][1].name}}</b></h6>
                        </span>
                    </router-link>
                </el-col>

                <el-col :span="0.5"></el-col>
                <el-col :span="4">
                    <router-link :to="'/detail/'+movie_lists[index][2].id">
                        <span>
                            <img :src="movie_lists[index][2].movie_img" height="250px"
                                 :alt="movie_lists[index][2].name">
                            <h6><b>{{movie_lists[index][2].name}}</b></h6>
                        </span>
                    </router-link>
                </el-col>

                <el-col :span="0.5"></el-col>
                <el-col :span="4">
                    <router-link :to="'/detail/'+movie_lists[index][3].id">
                        <span>
                            <img :src="movie_lists[index][3].movie_img" height="250px"
                                 :alt="movie_lists[index][3].name">
                            <h6><b>{{movie_lists[index][3].name}}</b></h6>
                        </span>
                    </router-link>
                </el-col>

                <el-col :span="0.5"></el-col>
                <el-col :span="4">
                    <router-link :to="'/detail/'+movie_lists[index][4].id">
                        <span>
                            <img :src="movie_lists[index][4].movie_img" height="250px"
                                 :alt="movie_lists[index][4].name">
                            <h6><b>{{movie_lists[index][4].name}}</b></h6>
                        </span>
                    </router-link>
                </el-col>
            </el-row>
        </div>


    </div>
</template>

<script>
    export default {
        name: "Movies",
        data() {
            return {
                category_list: [], // 电影分类列表
                l: [],
                movie_lists: [],   // 电影列表
            }
        },
        created() {
            this.get_category();
            this.get_movies();
        },
        methods: {
            get_category() {
                this.$axios.get(`${this.$settings.base_url}/yingshi/category/`).then(response => {
                    this.category_list = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影分类信息有误",
                    })
                })
            },
            get_movies() {
                this.$axios.get(`${this.$settings.base_url}/yingshi/category_movie/`).then(response => {
                    this.movie_lists = response.data;
                }).catch(() => {
                    this.$message({
                        message: "获取电影分类信息有误",
                    })
                })
            },
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
        margin-left: 190px;
    }

</style>